<template>
  <div>

    <el-input v-model="search.salesALL" class="w-50 m-2" placeholder="搜索框" prefix-icon="Search"
      style="width: 20%;min-width: 100px;" />

    <el-text class="mx-1" type="primary" size="small" style="margin-left: 20px;">项目类型:</el-text>
    <el-select v-model="search.projectType" class="m-2" placeholder="项目类型" size="small">
      <el-option v-for="item in searchSelect.projectType" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>


    <!-- {{ salesList }} -->
    <el-table :data="salesList" show-summary border style="width: 99%;height: 80vh;">

      <el-table-column align="center" fixed width="160">
        <template #header><!--自定义表头-->
          <el-text class="mx-1" type="primary" size="small">项目编号</el-text>
        </template>
        <template #default="scope"><!--自定义列-->

          <el-text class="mx-1" type="primary" style="cursor: pointer;" @dblclick="on_skipCode(scope.row.salesCode)"
            size="small">{{ scope.row.salesCode == null ? "无"
              : scope.row.salesCode
            }}</el-text>

        </template>
      </el-table-column>

      <el-table-column align="center" fixed width="160">
        <template #header><!--自定义表头-->
          <el-text class="mx-1" type="primary" size="small">项目类型</el-text>
        </template>
        <template #default="scope"><!--自定义列-->
          <el-text class="mx-1" size="small">{{ scope.row.projectType == null ? "无" : scope.row.projectType }}</el-text>

        </template>
      </el-table-column>



      <el-table-column align="center" prop="updName" width="160" fixed="right">
        <template #header><!--自定义表头-->
          <el-text class="mx-1" type="primary" size="small">销售预测单</el-text>
        </template>
        <template #default="scope"><!--自定义列-->

          <el-text class="mx-1" type="primary" style="cursor: pointer;" @dblclick="on_skipCode2(scope.row.salesForecastCode)"
            size="small">{{ scope.row.salesForecastCode == null ? "无"
              : scope.row.salesForecastCode
            }}</el-text>

        </template>
      </el-table-column>



      <el-table-column align="center" width="120">
        <template #header><!--自定义表头-->
          <el-text class="mx-1" type="primary" size="small">客户信息</el-text>
        </template>
        <template #default="scope"><!--自定义列-->
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>
                <el-tag class="mx-1" type="" effect="light" size="small">客&ensp;户&ensp;名&ensp;称&ensp;: </el-tag>
                <el-tag class="mx-1" type="" effect="light" size="small">{{ scope.row.custName == null ? "无" :
                  scope.row.custName }} </el-tag>
              </div>
              <div>
                <el-tag class="mx-1" type="" effect="dark" size="small"> 客户联系方式:</el-tag>
                <el-tag class="mx-1" type="" effect="light" size="small">{{ scope.row.custPhone == null ? "无" :
                  scope.row.custPhone }} </el-tag>
              </div>
              <div>
                <el-tag class="mx-1" type="success" effect="dark" size="small">客&ensp;户&ensp;地&ensp;址&ensp;: </el-tag>
                <el-tag class="mx-1" type="success" effect="light" size="small">{{ scope.row.custAddress == null ? "无" :
                  scope.row.custAddress }} </el-tag>
              </div>
            </template>
            <template #reference>
              <el-tag>{{ scope.row.custName == null ? "无名称" : scope.row.custName }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column align="center" sortable width="210" prop="strTime">
        <template #header><!--自定义表头-->
          <el-text class="mx-1" type="primary" size="small">要求(开始~结束)时间</el-text>
        </template>
        <template #default="scope"><!--自定义列-->
          {{ scope.row.strTime != null ? scope.row.strTime.substring(0, 10) : '未定' }}
          ~
          {{ scope.row.endTime != null ? scope.row.endTime.substring(0, 10) : '未定' }}
        </template>
      </el-table-column>

      <el-table-column align="center" sortable prop="actualEndTime" width="155">
        <template #header><!--自定义表头-->
          <el-text class="mx-1" type="primary" size="small">实际结束时间</el-text>
        </template>
        <template #default="scope"><!--自定义列-->
          {{ scope.row.actualEndTime != null ? scope.row.actualEndTime.substring(0, 10) : '尚未' }}
        </template>
      </el-table-column>

      <el-table-column align="center" sortable prop="amount" width="120">
        <template #header><!--自定义表头-->
          <el-text class="mx-1" type="primary" size="small">含税金额</el-text>
          <!-- <el-button :icon="amountEX?'Unock':'Lock'"/> -->
          <el-row @click.stop="on_amountEX()" style="display:inline-block;">
            <el-icon v-if="amountEX">
              <Unlock />
            </el-icon>
            <el-icon v-else>
              <Lock />
            </el-icon>
          </el-row>
        </template>
        <template #default="scope"><!--自定义列-->
          {{ amountEX ? (scope.row.amount == null ? "" : scope.row.amount + '万元') : '***' }}
        </template>
      </el-table-column>



      <el-table-column align="center" sortable prop="isScheme" width="130">
        <template #header><!--自定义表头-->
          <el-text class="mx-1" type="primary" size="small">是否需要方案</el-text>
        </template>
        <template #default="scope"><!--自定义列-->
          预测表获取
          {{ scope.row.isScheme ? '是' : '否' }}
        </template>
      </el-table-column>



      <el-table-column align="center" prop="userName" width="120" fixed="right">
        <template #header><!--自定义表头-->
          <el-text class="mx-1" type="primary" size="small">参与人</el-text>
        </template>
        <template #default="scope"><!--自定义列-->
          {{ scope.row.userName }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="updName" width="120" fixed="right">
        <template #header><!--自定义表头-->
          <el-text class="mx-1" type="primary" size="small">当前修改人</el-text>
        </template>
        <template #default="scope"><!--自定义列-->
          {{ scope.row.updName }}
        </template>
      </el-table-column>

      <el-table-column align="center" sortable prop="createTime" width="120">
        <template #header><!--自定义表头-->
          <el-text class="mx-1" type="primary" size="small">提交时间</el-text>
        </template>
        <template #default="scope"><!--自定义列-->
          {{ scope.row.createTime != null ? scope.row.createTime.substring(0, 10) : '未知' }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="trackingState" width="130">
        <template #header><!--自定义表头-->
          <el-text class="mx-1" type="primary" size="small">跟踪过程刷新</el-text>
        </template>
        <template #default="scope"><!--自定义列-->
          {{ scope.row.trackingState }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="remark" width="155">
        <template #header><!--自定义表头-->
          <el-text class="mx-1" type="primary" size="small">备注</el-text>
        </template>
        <template #default="scope"><!--自定义列-->
          {{ scope.row.remark }}
        </template>
      </el-table-column>

      <el-table-column align="center" sortable prop="schemeActualTimes" width="155">
        <template #header><!--自定义表头-->
          <el-text class="mx-1" type="primary" size="small">提交时间</el-text>
        </template>
        <template #default="scope"><!--自定义列-->
          {{ scope.row.schemeActualTimes != null ? scope.row.schemeActualTimes.substring(0, 10) : '未定' }}
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination v-model:current-page="search.currentPage" v-model:page-size="search.pageSize"
        :page-sizes="[10, 20, 30, 40]" small="small" :disabled="false" :background="false"
        layout="total, sizes, prev, pager, next, jumper" :total="pageSizeMax" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, onMounted, watch } from 'vue'
import api from '/@/api/sy/apiERP.js';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
const router = useRouter();
// import { watch } from 'node:fs';

//搜索
const search = ref({
  salesALL: '',//整体模糊搜索
  projectType: '',//指定项目类型
  state: 0,//指定状态
  strTime: null,
  endTime: null,
  currentPage: 1,
  pageSize: 30,
})

// 双击跳转
function on_skipCode(val: string) {
  // router.push({
  //   name: "sales_upd",
  //   query: { salesCode: val},
  // });
  router.push({
    name: "sales_upd",
    params: { salesCode: val },
  });
  
  // 使用 params 对象传递参数
  //   const params = { salesForecastCode: val };

  // // 使用 name 属性指定路由名称
  // router.push({ name: 'sales_upd', params });  
}
// 双击跳转
function on_skipCode2(val: string) {
  router.push({
    name: "salesforecast_upd",
    params: { salesForecastCode: val },
  });
  // 使用 params 对象传递参数
  //   const params = { salesForecastCode: val };

  // // 使用 name 属性指定路由名称
  // router.push({ name: 'sales_upd', params });  
}
// 搜索框state和projectType的筛选
const searchSelect = ref({
  projectType: [
    { label: 'WMS', value: 'WMS', },
    { label: 'MES', value: 'MES', },
    { label: 'AGV', value: 'AGV', },
    { label: 'SCADA', value: 'SCADA', },
    { label: 'SAP', value: 'SAP', },
    { label: '其它', value: '其它', },
    { label: '全部', value: '', },
  ],//指定项目类型
  state: [
    { label: '跟踪中', value: 1, },
    { label: '丢单', value: 2, },
    { label: '客户取消', value: 3, },
    { label: '已签单', value: 4, },
    { label: '全部', value: 0, },
  ],//指定状态
})

watch(search, (newVal, oldVal) => {
  salesShow()
}, { deep: true }) // 深层监控

//页数
let pageSizeMax = ref<number>(0)
const handleSizeChange = (val: number) => {
  search.value.pageSize = val
  // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  search.value.currentPage = val
  // console.log(`current page: ${val}`)
}
// 对象类型
interface interfaceSales {
  salesID: number | null,
  salesForecastCode: number | null,
  salesCode: string | null,
  projectType: string | null,
  custName: string | null,
  custPhone: string | null,
  custAddress: string | null,
  number: number | null,
  amount: number | null,
  paymentMethod: string | null,
  remark: string | null,
  userName: number | null,
  updName: number | null,
  state: number | null,
  updateTime: Date | null,
  createTime: Date | null,
  strTime: Date | null,
  endTime: Date | null,
  actualEndTime: Date | null,

  trackingState: string | null

}
// 数组对象
let salesList = ref<interfaceSales[]>([])

// 获取数组对象
function salesShow() {
  api.post('public/sales/getSalesList', search.value).then((response: any) => {
    // 处理服务器返回的响应
    salesList.value = response.data.data.salesList
    pageSizeMax.value = response.data.data.pageSizeMax
    console.log(salesList);


  })
    .catch((error: any) => {
      //console.log(error);
      // 处理错误
    })
    .finally(() => {

    })

    ;
}


// 金额显示与隐藏
const amountEX = ref(false)
function on_amountEX() {
  amountEX.value = !amountEX.value
  // console.log(amountEX);

}

onMounted(() => {

  salesShow()
  // 在这里写逻辑
});

</script>
